<template>
  <div class="has_header">
    <Header></Header>
    <ul class="mine_list">
      <li @click="setlan"><router-link to="/settingLanguage">{{$t('m.langSwap')}}</router-link></li>
      <li><router-link to="/settingAutoplay">{{$t('m.playSetting')}}</router-link></li>
    </ul>
    <ul class="mine_list">
      <li><router-link to="/settingNotice">{{$t('m.notice')}}</router-link></li>
      <li><router-link to="/settingSuggest">{{$t('m.feedback')}}</router-link></li>
      <li><router-link to="/about">{{$t('m.about')}}</router-link></li>
    </ul>
    <div class="set_btn">
      <mt-button @click="exit" type="default" plain size="large">{{$t('m.signOut')}}</mt-button>
    </div>
  </div>

</template>

<script type="text/ecmascript-6">
  import Header from './comment/header/header'
  export default {
      components:{Header},
      name: "setting",
      data(){
        return{
          transitionName:'slide-left'
        }
      },
      mounted(){
        if(sessionStorage.getItem('lang')==='en_us'){
          this.$store.state.detailTitle = 'setting';
        }else {
          this.$store.state.detailTitle = '设置';
        }
        //this.$store.state.detailTitle = '设置';
        this.$store.state.showTab = false;
      },
      methods:{
        enter(){
          this.transitionName='slide-left'
        },
        setlan(){
          this.transitionName='s';
        },
        exit(){
          sessionStorage.setItem('isLogin',0);
          this.$store.state.isLogin = sessionStorage.getItem('isLogin');
          sessionStorage.setItem('userId',0);
          this.$store.state.userId = sessionStorage.getItem('userId');
          this.$router.push('/');
        }
      }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  border-1px()
    content ''
    position absolute
    width 100%
    height 1px
    left 0
    bottom 0
    border-top 1px solid #F5F5F5
    -webkit-transform-origin 0 100%
    transform-origin 0 100%
    -webkit-transform scaleY(0.5)
    transform scaleY(0.5)
  .has_header
    padding-top 44px;
    height 100vh
    background #FAFAFA
  .mine_list
    padding 0 0.05rem
    margin-top 0.2rem
    background #fff
    li
      position relative
      height 0.5rem
      &::after
        content ''
        border-1px()
  .mine_list a
    -webkit-display flex
    display flex
    font-size 0.15rem
    color #000
    align-items center
    height 100%
    width 100%
    padding 0 0.15rem
    &:active
      background #f7f7f7
    &::after
      content ''
      position absolute
      width 0.07rem
      height 100%
      right 0.15rem
      top 0
      background url("../static/img/more.png") right center no-repeat
      background-size 0.07rem auto
    img
      width 0.22rem
      height 0.22rem
      margin-right 0.1rem
  .set_btn
    padding 0 0.4rem
    margin-top 0.2rem
</style>
